<template>
<!-- 等于 1   代表点赞了 -->
    <van-icon
      :name="value.attitude === 1 ? 'flower-o' : 'thumb-circle-o'"
      :color="value.attitude === 1 ? 'red' : '#777'"
      @click="onLike"
      :loading="Loading"
    >
    </van-icon>
</template>

<script>
import { addLike, deleteLike } from '@/api/user.js'
export default {
  name: 'LikeArticle',
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      Loading: false // 控制 加载 转圈圈的 显示状态  当请求获取到结果之后 肯定要结束这个转圈圈的加载效果
    }
  },
  methods: {
    async onLike () { // 点击 "点赞/取消点赞" 按钮 后 即刻显示 loading状态 请求结束后关闭 达到防抖节流的效果
      // console.log(123)
      this.Loading = true
      try {
        let status = -1 // 当一个临时变量 用于给承载修改父组件article.attitude的值 -1无态度 0不喜欢 1喜欢
        if (this.value.attitude === 1) { // 说明 已经点赞了
        // 则进行 取消点赞 操作
          await deleteLike(this.value.art_id)
        } else { // 说明没有点赞
        // 则进行 点赞操作
          await addLike(this.value.art_id)
          status = 1
        }

        // 视图更新 通过 this.$emit() 传给父组件来修改数据
        this.$emit('Updata_Like', status)
      } catch (err) {
        console.log('点赞组件出现了错误')
      }
      this.Loading = false
    }
  }
}
</script>

<style>

</style>
